<template>
  <div class="app-container">
      <div class="filter-container">
        <el-button class="filter-item" type="primary" v-waves icon="el-icon-plus" @click="handleUpdate(null)">添加</el-button>        
        
              
        <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="优惠券名称" v-model="filters.like$title"></el-input>       
                    
              

        <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
        <el-button class="filter-item" type="primary"  v-waves icon="el-icon-document" @click="exportExcelFile">导出</el-button>
      </div>
      <el-table :data="list" @sort-change="sortChange" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row
      style="width: 100%">
        <el-table-column align="center" type="index" label="序号" width="80">
        </el-table-column>

        
        
        <el-table-column  prop="title" align="center" label="优惠券名称" width="120">
          <template slot-scope="scope">
            <span>{{scope.row.title}}</span>
          </template>
        </el-table-column>
        
        
        <el-table-column  prop="amount" align="center" label="面值" width="120">
          <template slot-scope="scope">
            <span>{{scope.row.amount}}</span>
          </template>
        </el-table-column>
        
        
        <el-table-column  prop="total" align="center" label="发送总量" width="120">
          <template slot-scope="scope">
            <span>{{scope.row.total}}</span>
          </template>
        </el-table-column>
        
        
        <el-table-column  prop="manLimit" align="center" label="每人限领" width="120">
          <template slot-scope="scope">
            <span>{{scope.row.manLimit}}</span>
          </template>
        </el-table-column>
        
        
        <el-table-column  prop="orderAmount" align="center" label="订单金额" width="120">
          <template slot-scope="scope">
            <span>{{scope.row.orderAmount}}</span>
          </template>
        </el-table-column>
        
        
        <el-table-column  prop="startDate" align="center" label="有效开始日期" width="120">
          <template slot-scope="scope">
            <span>{{scope.row.startDate}}</span>
          </template>
        </el-table-column>
        
        
        <el-table-column  prop="endDate" align="center" label="有效结束日期" width="120">
          <template slot-scope="scope">
            <span>{{scope.row.endDate}}</span>
          </template>
        </el-table-column>
        
        
        <el-table-column  prop="usedForGoodsId" align="center" label="适用范围" width="120">
          <template slot-scope="scope">
            <span>{{scope.row.usedForGoodsId}}</span>
          </template>
        </el-table-column>
        
        
        <el-table-column  prop="oilStationId" align="center" label="适用油站" width="120">
          <template slot-scope="scope">
            <span>{{scope.row.oilStationId}}</span>
          </template>
        </el-table-column>
        
        
        <el-table-column  prop="cityId" align="center" label="适用城市" width="120">
          <template slot-scope="scope">
            <span>{{scope.row.cityId}}</span>
          </template>
        </el-table-column>
        
        
        <el-table-column width="100"  prop="pickTypes" align="center" label="领取方式">
          <template slot-scope="scope">
              <el-tag :type="scope.row.pickTypes | pickTypestagFilter">{{scope.row.pickTypes|pickTypesFilter}}</el-tag>
          </template>
        </el-table-column>
        
        
        <el-table-column width="100"  prop="canUsedActs" align="center" label="与活动同时使用">
          <template slot-scope="scope">
              <el-tag :type="scope.row.canUsedActs | canUsedActstagFilter">{{scope.row.canUsedActs|canUsedActsFilter}}</el-tag>
          </template>
        </el-table-column>
        
        
        <el-table-column  prop="createTime" align="center" label="创建时间" width="120">
          <template slot-scope="scope">
            <span>{{scope.row.createTime}}</span>
          </template>
        </el-table-column>
        
        
        <el-table-column align="center" label="操作" width="200" class-name="small-padding">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">修改</el-button>          
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="params.page"
        :page-sizes="[10,20,30,50]" :page-size="params.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <el-dialog :title="isEditing?'修改':'添加'" :visible.sync="dialogFormVisible">
      <el-form class="dialog-form" :rules="rules" ref="dataForm" :model="temp" label-position="left" label-width="120px">
        
        <el-form-item label="优惠券名称" prop="title">          
            
                                  
                  <el-input v-model="temp.title" placeholder="优惠券名称"></el-input>
                
            
        </el-form-item>         
        
        <el-form-item label="面值" prop="amount">          
            
                                  
                  <el-input v-model="temp.amount" placeholder="面值"></el-input>
                
            
        </el-form-item>         
        
        <el-form-item label="发送总量" prop="total">          
            
                                  
                  <el-input v-model="temp.total" placeholder="发送总量"></el-input>
                
            
        </el-form-item>         
        
        <el-form-item label="每人限领" prop="manLimit">          
            
                                  
                  <el-input v-model="temp.manLimit" placeholder="每人限领"></el-input>
                
            
        </el-form-item>         
        
        <el-form-item label="订单金额" prop="orderAmount">          
            
                                  
                  <el-input v-model="temp.orderAmount" placeholder="订单金额"></el-input>
                
            
        </el-form-item>         
        
        <el-form-item label="有效开始日期" prop="startDate">          
            
                                  
                  <el-input v-model="temp.startDate" placeholder="有效开始日期"></el-input>
                
            
        </el-form-item>         
        
        <el-form-item label="有效结束日期" prop="endDate">          
            
                                  
                  <el-input v-model="temp.endDate" placeholder="有效结束日期"></el-input>
                
            
        </el-form-item>         
        
        <el-form-item label="适用范围" prop="usedForGoodsId">          
            
                                  
                  <el-input v-model="temp.usedForGoodsId" placeholder="适用范围"></el-input>
                
            
        </el-form-item>         
        
        <el-form-item label="适用油站" prop="oilStationId">          
            
                                  
                  <el-input v-model="temp.oilStationId" placeholder="适用油站"></el-input>
                
            
        </el-form-item>         
        
        <el-form-item label="适用城市" prop="cityId">          
            
                                  
                  <el-input v-model="temp.cityId" placeholder="适用城市"></el-input>
                
            
        </el-form-item>         
        
        <el-form-item label="领取方式" prop="pickTypes">          
            
                                  
                  <el-select v-model="temp.pickTypes" placeholder="请选择">
                    <el-option
                      v-for="(item,value) in pickTypesFilter"
                      :key="value"
                      :label="item"
                      :value="value">
                    </el-option>
                  </el-select>
                
            
        </el-form-item>         
        
        <el-form-item label="与活动同时使用" prop="canUsedActs">          
            
                                  
                  <el-select v-model="temp.canUsedActs" placeholder="请选择">
                    <el-option
                      v-for="(item,value) in canUsedActsFilter"
                      :key="value"
                      :label="item"
                      :value="value">
                    </el-option>
                  </el-select>
                
            
        </el-form-item>         
                         
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" :loading="submiting" @click="submitFormAction">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

let pickTypesFilter = ["主动领取","指定发送","积分兑换"];
let pickTypestagFilter = ["success", "danger","info","warning"];

let canUsedActsFilter = ["限时抢购","团购"];
let canUsedActstagFilter = ["success", "danger","info","warning"];

export default {
  data() {
    return {
      temp:{
          
          id:'',
          
          title:'',
          
          amount:'',
          
          total:'',
          
          manLimit:'',
          
          orderAmount:'',
          
          startDate:'',
          
          endDate:'',
          
          usedForGoodsId:'',
          
          oilStationId:'',
          
          cityId:'',
          
          pickTypes:'',
          
          canUsedActs:'',
          
      },
      
            pickTypesFilter:pickTypesFilter,
            
            canUsedActsFilter:canUsedActsFilter,
            
      rules: {
        
        title: [
          
          { required: true, message: "优惠券名称不能为空", trigger: "change",max:20}
          
        ],        
        
        amount: [
          
          { required: true, message: "面值不能为空", trigger: "change"}
          
        ],        
        
        total: [
          
          { required: true, message: "发送总量不能为空", trigger: "change"}
          
        ],        
        
        manLimit: [
          
          { required: true, message: "每人限领不能为空", trigger: "change"}
          
        ],        
        
        orderAmount: [
          
          { required: true, message: "订单金额不能为空", trigger: "change"}
          
        ],        
        
        startDate: [
          
          { required: true, message: "有效开始日期不能为空", trigger: "change"}
          
        ],        
        
        endDate: [
          
          { required: true, message: "有效结束日期不能为空", trigger: "change"}
          
        ],        
        
        usedForGoodsId: [
          
          { required: true, message: "适用范围不能为空", trigger: "change"}
          
        ],        
        
        oilStationId: [
          
          { required: true, message: "适用油站不能为空", trigger: "change"}
          
        ],        
        
        cityId: [
          
          { required: true, message: "适用城市不能为空", trigger: "change"}
          
        ],        
        
        pickTypes: [
          
          { required: true, message: "领取方式不能为空", trigger: "change"}
          
        ],        
        
        canUsedActs: [
          
          { required: true, message: "与活动同时使用不能为空", trigger: "change"}
          
        ],        
        
      }
    };
  },
  created() {
    this.init("coupon",1).loadData();

    

    
  },
  filters: {

    pickTypesFilter(status){
        return pickTypesFilter[parseInt(status)];
    },
    pickTypestagFilter(status){
        return pickTypestagFilter[parseInt(status)];
    },

    canUsedActsFilter(status){
        return canUsedActsFilter[parseInt(status)];
    },
    canUsedActstagFilter(status){
        return canUsedActstagFilter[parseInt(status)];
    },

  },
  methods: {
    exportExcelFile() {
      this.exportExcel({
        title: "优惠券",
        fields: [
          
            
            {field:'title',title:'优惠券名称'}
          
            ,
            {field:'amount',title:'面值'}
          
            ,
            {field:'total',title:'发送总量'}
          
            ,
            {field:'manLimit',title:'每人限领'}
          
            ,
            {field:'orderAmount',title:'订单金额'}
          
            ,
            {field:'startDate',title:'有效开始日期'}
          
            ,
            {field:'endDate',title:'有效结束日期'}
          
            ,
            {field:'usedForGoodsId',title:'适用范围'}
          
            ,
            {field:'oilStationId',title:'适用油站'}
          
            ,
            {field:'cityId',title:'适用城市'}
          
            ,
            {field:'pickTypes',title:'领取方式',valueMap:["主动领取","指定发送","积分兑换"]}
          
            ,
            {field:'canUsedActs',title:'与活动同时使用',valueMap:["限时抢购","团购"]}
          
            ,
            {field:'createTime',title:'创建时间'}
          
        ]
      }).then(info => {
        this.openWin(info);        
      });
    }
  }
};
</script>
